<template>
  <div class="model-valid-rule">
    <div class="model-valid-reset">
      <el-button @click="model.handleReset()">
        <img src="statics/header/restore.svg" />
        <span>{{ $t("恢复默认设置") }}</span>
      </el-button>
    </div>
    <div class="valid-rule-table">
      <table
        border="1px"
        borderColor="#E0E0E0"
        align="start"
      >
        <thead>
          <tr>
            <td :colspan="2">
              <h3 class="g-pd-l-20">{{ $t("模型校验配置") }}</h3>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(ruleItem, ruleIndex) of ruleOptions"
            :key="ruleItem.label + ruleIndex"
          >
            <td class="g-pd-l-20">
              {{ $t(ruleItem.label) }}
            </td>
            <td
              v-if="ruleItem.type === 'select'"
              class="rule-td-content"
            >
              <el-select
                v-model="model.ruleValue[ruleItem.key]"
                class="rule-select"
              >
                <el-option
                  v-for="option of ruleItem.options"
                  :key="option.value"
                  :label="$t(option.label)"
                  :value="option.value"
                ></el-option>
              </el-select>
            </td>
            <td
              v-else-if="ruleItem.type === 'switch'"
              class="rule-td-content"
            >
              <el-switch
                v-model="model.ruleValue[ruleItem.key]"
                inline-prompt
                :active-text="$t('是')"
                :inactive-text="$t('否')"
                class="rule-switch"
                size="large"
              ></el-switch>
            </td>
            <td
              v-else
              class="rule-td-content"
            >
              <el-input-number
                v-model="model.ruleValue[ruleItem.key]"
                class="rule-input-number"
                controls-position="right"
                size="small"
                :min="60"
                :max="3600"
              ></el-input-number>
              {{ $t("单位(秒)") }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";

import { ModelValidRule, ruleOptions } from "./modelValidRule";

const model = reactive(new ModelValidRule());
onMounted(async () => {});
function handleApply() {
  model.handleSave();
}
defineExpose({
  handleApply
});
</script>
<style lang="scss" scoped>
.model-valid-rule {
  .model-valid-reset {
    display: flex;
    flex-direction: row-reverse;
  }
  .valid-rule-table {
    display: flex;
    margin-top: 10px;
    table {
      flex: 1;
      .rule-input-number {
        border: 1px solid #e0e0e0;
        border-radius: 2px;
      }
      .rule-input-number,
      .rule-switch,
      .rule-select {
        height: 25px;
      }
      .rule-td-content {
        padding: 0 10px;
      }
    }
  }
}
</style>
